Create a button with a button or a element to retain the native click function. Use a disabled attribute when a button can’t be clicked.
Basedev ready
Preview
Code
<button class="slds-button">Button</button>The base .slds-button looks like a plain text link. It removes all the styling of the native button. It’s typically used to trigger a modal or display a “like” link. All button variations are built by adding another class to .slds-button.
Add the .slds-button--neutral class to create a neutral button, which has a white background and gray border.
Use a neutral icon button is for buttons with an icon on the left or right (not for stateful buttons). Add the .slds-button--neutral class to .slds-button.
The SVG inside receives the .slds-button__icon class. You can position the icon on the right or the left using .slds-button__icon--right or .slds-button__icon--left , which apply the correct amount of space between the icon and the text.
To create the brand button, add the .slds-button--brand class to the .slds-button class.
To create the destructive button, add the .slds-button--destructive class to the .slds-button class.
Use the inverse button on dark backgrounds. Add the .slds-button--inverse class to the .slds-button class.
Statefuldev ready
Preview
Code
<button class="slds-button slds-button--neutral slds-not-selected" aria-live="assertive">
<span class="slds-text-not-selected">
<svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
</svg>Follow</span>
<span class="slds-text-selected">
<svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>Following</span>
<span class="slds-text-selected-focus">
<svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>Unfollow</span>
</button>The stateful button requires the .slds-button--neutral class in addition to the .slds-button class.
The stateful inverse button works just like the stateful button. It requires the .slds-button--inverse class in addition to the .slds-button class.
It uses the class .slds-not-selected in its initial state. When the user activates the button, use JavaScript to toggle the class to .slds-is-selected. The button contains three spans with classes that hide or show the content of the spans based on the class on the button. Each span contains text and a corresponding icon. The SVG will have the .slds-button__icon--stateful class as well as the .slds-button__icon--left class setting the icon on the left.
Stateful icons can be toggled on and off and retain their state. Like stateful buttons, the initial state is .slds-not-selected, and JavaScript is used to toggle it to .slds-is-selected when activated.
Accessibility
For accessibility, include the attribute aria-live="assertive" on the button. The aria-live="assertive" attribute means the value of the <span> inside the button will be spoken whenever it changes.
Icondev ready
Preview
Code
<button class="slds-button slds-button--icon">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
</svg>
<span class="slds-assistive-text">Settings</span>
</button>The various button icons vary in the amount of space they use on the page. Some have background colors, and some are transparent.
.slds-button--icon-baredoes not take up the 36px height that a normal button does. Although you create it with a‹button›element, it looks like a plain icon and is the height of the icon..slds-button--icon-containerlooks like an icon and takes the default space of a button (36px). It has no background or border..slds-button--icon-borderincludes a border. It is the default size (36px)..slds-button--icon-border-filledadds a background color and border like the.slds-button--neutral..slds-button--icon-smallchanges the default size of 36px to the size of 32px..slds-button--icon-x-smallchanges the default size of 36px to the size of 20px.- Use
.slds-button__icon--x-smallin an.slds-icon--more iconbutton to indicate that more information is available.. - Use
.slds-button__icon--smallwithin.slds-button__icon--hinton rows in which hovering over the parent element or table row causes the button to brighten up. - The normal sized
.slds-button__iconis used in many places, including small close icons on alerts. - Use
.slds-button__icon--largeto create a large close button for modals and toasts. It’s usually used with.slds-button--inverse.
The classes added to each button are added to the base .slds-button class. The <svg> inside the buttons all have the base class of .slds-button__icon.
A hint button is grayed out until its parent is hovered over. Then the hover and focus states are just like a regular icon button.
The parent element must have the class .slds-hint-parent, and the icon inside the button has the class .slds-button__icon--hint.
Use the small button with the down icon in rows and action menus. Add the class .slds-button--icon-x-small on the button. Use .slds-button__icon--small for the inside icon.
Accessibility
Icons without identifying text must have descriptive text in a .slds-assistive-text.
Component Overview
Accessibility
If an icon button doesn’t include a label, use a span with .slds-assistive-text to describe the icon for screen readers.
Usage
| Class Name | Usage | |
|---|---|---|
.slds-button | Applied to:
Initializes a 2.25rem (36px) height button | Required: Required Comments:This neutralizes all the base styles making it look like a text link |
.slds-button--small | Applied to:
Creates a smaller 2rem (32px) button | Required: No, optional element or modifier Comments:-- |
.slds-button--neutral | Applied to:
Creates the gray border with white background default style | Required: No, optional element or modifier Comments:-- |
.slds-button--brand | Applied to:
Creates the brand blue Salesforce style | Required: No, optional element or modifier Comments:-- |
.slds-button--destructive | Applied to:
Creates a red button style | Required: No, optional element or modifier Comments:The use case for this button is things like delete, cancel, and end call rather than errors. |
.slds-button--inverse | Applied to:
Creates the inverse style for dark backgrounds | Required: No, optional element or modifier Comments:-- |
.slds-button--icon | Applied to:
Creates a button that looks like a plain icon | Required: No, optional element or modifier Comments:This is 1rem×1rem like an icon, not a regular button |
.slds-button--icon-bareDeprecated | Applied to:
Creates a button that looks like a plain icon | Required: No, optional element or modifier Comments:This is 1rem×1rem like an icon, not a regular button |
.slds-button--icon-container | Applied to:
Creates a button that looks like a plain icon | Required: No, optional element or modifier Comments:This is 2.25rem×2.25rem like a button |
.slds-button--icon-border | Applied to:
Creates an icon button with a border | Required: No, optional element or modifier Comments:There is no background color until hover for this style |
.slds-button--icon-border-filled | Applied to:
Creates an icon button with a border | Required: No, optional element or modifier Comments:This is 2.25rem×2.25rem like a button |
.slds-button--icon-inverse | Applied to:
Gives a white icon color on a dark background | Required: No, optional element or modifier Comments:When used alone it has a subtle hover. When used in a button-group it assumes the hover state of the buttons next to it. |
.slds-button--icon-small | Applied to:
Creates an icon button at the smaller 2rem (32px) size | Required: No, optional element or modifier Comments:Be aware that this sizes the button, not the icon |
.slds-button--icon-x-small | Applied to:
Creates an icon button at the smaller 1.25rem (20px) size | Required: No, optional element or modifier Comments:Be aware that this sizes the button, not the icon |
.slds-button--icon-more | Applied to:
Used for the style where only two icons are in a button | Required: No, optional element or modifier Comments:This is usually an icon with a down arrow icon next to it. Each svg within is sized separately |
.slds-button__icon | Applied to:
Sets the size and color of the icon inside a button | Required: No, optional element or modifier Comments:-- |
.slds-button__icon--stateful | Applied to:
This makes the icon the same color as the text in the button | Required: No, optional element or modifier Comments:This is not used in addition to |
.slds-button__icon--left | Applied to:
Puts the icon on the left side of the button | Required: No, optional element or modifier Comments:-- |
.slds-button__icon--right | Applied to:
Puts the icon on the right side of the button | Required: No, optional element or modifier Comments:-- |
.slds-button__icon--x-small | Applied to:
Creates a .5rem (8px) size icon | Required: No, optional element or modifier Comments:This is added to the icon inside the |
.slds-button__icon--small | Applied to:
Creates a .75rem (12px) size icon | Required: No, optional element or modifier Comments:-- |
.slds-button__icon--large | Applied to:
Creates a 1.5rem (24px) size icon | Required: No, optional element or modifier Comments:-- |
.slds-button__icon--hint | Applied to:
Creates a grayed out icon until the parent is hovered | Required: No, optional element or modifier Comments:The parent must have the |
.slds-button-space-left | Applied to:
Adds space on the left of a button wrapped in a parent | Required: No, optional element or modifier Comments:Only required if the |